<template>
  <div>
    <van-nav-bar class="user-nav-bg" :title="$t('user.t1')" />
    <div class="user-info-bg">{{ userName }}</div>
    <van-cell-group class="user-group">
      <van-cell :title="$t('user.t2')" is-link @click="onChangePassword" />
    </van-cell-group>
    <van-button type="default" class="user-button" @click="onLogout">{{ $t("user.t3") }}</van-button>
  </div>
</template>

<script>
import {Cell, CellGroup, Button, NavBar, Toast} from 'vant';
import {logout} from "../../api/admin";
import {removeToken} from "../../utils/auth";
import configJs from "../../config";
import {getSessionItem} from "../../utils/storage";

export default {
  components: {
    [NavBar.name]: NavBar,
    [Button.name]: Button,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup
  },

  data() {
    return {
      userName: '',
    };
  },

  created() {
    let userInfoStr = JSON.parse(getSessionItem('userInfo'));
    this.userName = userInfoStr.name;
  },

  methods: {
    onLogout() {
      logout(this, null).then((response) => {
        if (response.data.code === configJs.errCode.errOk || response.data.code.startsWith('0')) {
          removeToken()
          this.$router.push({path: '/login'})
        }
      }).catch(function (error) {
        console.log(error)
      })
    },

    onChangePassword() {
      this.$router.push("changePassword");
    }
  },
};
</script>

<style lang="less">
.user {
  &-nav-bg {
    //box-shadow: 0 0 25px #cac6c6;
    //background: #4293F4;
  }

  &-info-bg {
    background: #4293F4;
    height: 100px;
    color: #fff;
    text-align: center;
    line-height: 100px;
    //margin-bottom: 15px;
  }

  &-button {
    width: 100%;
    color: #1989fa;
    font-size: 15px;
    font-weight: bold;
  }

  &-group {
    margin-bottom: 15px;
  }
}
</style>
